<template>
  <div>
    <a-modal
      :title="title"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      :cancelText="cancelText"
      :destroyOnClose="true"
      :okText="okText"
    >
      <p>{{hint}}</p>
      <a-textarea
        v-if="isRefuse == 2"
        :placeholder="remarksList[status]"
        v-model.trim="customRemarks"
        :rows="rows"
        :maxlength="maxlength"
      />
      <a-textarea
        v-if="isRefuse == 1"
        v-model.trim="customRemarks"
        :rows="rows"
        :maxlength="maxlength"
      />
    </a-modal>
  </div>
</template>

<script>
// 备注组件
export default {
  name: 'remarks',
  props: {
    title: {
      type: String,
      default: '审核',
      required: false
    },
    hint: {
      type: String,
      default: '确认吗？',
      required: false
    },
    // 1 确定 2 取消
    isRefuse: {
      type: [String, Number],
      default: 1,
      required: false
    },
    // 0 余额提现备注（默认） 1 保证金提现备注 //后续如果有其他类型备注添加remarksList数据即可
    status: {
      type: Number,
      default: 0,
      required: false
    },
    okText: {
      type: String,
      default: '确认',
      required: false
    },
    cancelText: {
      type: String,
      default: '取消',
      required: false
    },
    maxlength: {
      type: Number,
      default: 60,
      required: false
    },
    rows: {
      type: Number,
      default: 4,
      required: false
    }
  },
  data() {
    return {
      visible: false,
      customRemarks: '',
      remarksList: [
        '银行卡信息有误,请联系客服(4000033881)修改',
        '您未达到提现要求，还需要努力哦!'
      ]
    }
  },
  methods: {
    // 打开弹窗
    openDialog() {
      this.visible = true
    },
    // 关闭弹窗
    handleCancel() {
      this.visible = false
    },
    // 通知父组件
    handleOk() {
      this.handleCancel()
      let remarks = this.customRemarks
      // 拒绝
      if (this.isRefuse == 2 && !remarks) {
        remarks = this.remarksList[this.status]
      }
      this.$emit('remarksConfirm', {
        remarks
      })
      this.customRemarks = ''
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
